<script lang="ts" setup>
import { ref } from 'vue';
import type { FormInstance } from '@arco-design/web-vue/es/form';

const props = defineProps({
  name: {
    type: String,
    default: '',
  },
  url: {
    type: String,
    default: '',
  },
  pic: {
    type: String,
    default: '',
  },
});

const formData = ref({
  name: props.name,
  url: props.url,
  pic: props.pic,
});
const formRef = ref<FormInstance>();

const dialogClickButton = async (button: string) => {
  if (button !== 'ok') {
    return;
  }

  const res = await formRef.value?.validate();

  if (res) {
    return false;
  }

  return {
    close: true,
    name: formData.value.name,
    url: formData.value.url,
    pic: formData.value.pic,
  };
}

defineExpose({
  dialogClickButton,
});
</script>

<template>
  <AForm ref="formRef" auto-label-width scroll-to-first-error :model="formData">
    <AFormItem field="name" :label="$t('settings.view.general.addMedium.column1')" :rules="[{ required: true, message: $t('settings.notification.required') }]">
      <AInput v-model="formData.name" :max-length="50" allow-clear show-word-limit />
    </AFormItem>

    <AFormItem field="url" :label="$t('settings.view.general.addMedium.column2')" :rules="[{ required: true, message: $t('settings.notification.required') }]">
      <AInput v-model="formData.url" :max-length="100" allow-clear show-word-limit />
    </AFormItem>

    <AFormItem field="pic" :label="$t('settings.view.general.addMedium.column3')" :rules="[{ required: true, message: $t('settings.notification.required') }]">
      <OpenUpload v-model="formData.pic" />
    </AFormItem>
  </AForm>
</template>

<style lang="scss" scoped>
</style>
